{% extends 'KeioStudyBundle:Theme:layout_flowergarden.html.twig' %}

{% block title %}
		Practice
{% endblock %}

{% block content %}

{% if detailcauhoi|length == 0 %}
	Làm sao mà detailcauhoi có lenght 0 được
{% else %}
	<h3>Câu hỏi là:</h3>
	<p><br> <font style="font-weight:bold">Tiêu đề:</font> {{ detailcauhoi.tieude }}
	<br> <font style="font-weight:bold">Nội dung:</font> {{ detailcauhoi.noidung|raw }}
	<br> <font style="font-weight:bold">Số điểm:</font> {{ detailcauhoi.diem }}

{% if datraloi==0 %}
	{% if detailcauhoi.loai==0 %}
		<h3>Hãy chọn câu trả lời:</h3>
	{% else %}
		<h3>Điền vào trả lời</h3>
	{% endif %}
	<form action="{{ path('member_lambai', { 'cauhoi_id': detailcauhoi.id, 'baihoc_id': baihoc_id }) }}" method="post">
		{{ form_traloi|raw }}
		<br><input type="submit" value="Submit">
	</form>

	<p>Muốn bỏ qua? Chọn câu hỏi tiếp theo hoặc trước
{% else %}

	{% if traloidung==1 %}
		{% set flash='Bạn trả lời đúng' %}
	{% else %}
		{% set flash='Ối giời ơi sai rồi !!!' %}
	{% endif %}

		<div id="flash">
				<table><tr><td style="height:100px; vertical-align:middle">
					<p><font style="color:blue; font-size:3em">
						{{ flash }}
					</font>
				</td></tr></table>
		</div>

		<div id="msg">
				<table><tr><td style="height:100px; vertical-align:middle">
					<p><font style="color:blue; font-size:3em">
						Totooo
					</font>
				</td></tr></table>
		</div>

	<br>Nếu muốn thử lại thì nhấn vào đây:
	<a href="{{ path('member_lambai', { 'cauhoi_id': detailcauhoi.id, 'baihoc_id': baihoc_id }) }}">Thử lại</a>

	<p style="padding-left:50px; padding-top:10px"><font style="font-weight:bold">Các lựa chọn trả lời:</font>
	{% for tl in detailcauhoi.traloi %}
		<br>- {{ tl.noidung|raw }}
	{% endfor %}

	<p>Muốn làm tiếp ko?
{% endif %}

	<br>
		{% if cautruoc==-1 %}
			Câu trước
		{% else %}
			<a href="{{ path('member_lambai', { 'cauhoi_id': cautruoc, 'baihoc_id': baihoc_id }) }}">Câu trước</a>
		{% endif %}
	|
		{% if cautiep==-1 %}
			Câu tiếp theo
		{% else %}
			<a href="{{ path('member_lambai', { 'cauhoi_id': cautiep, 'baihoc_id': baihoc_id }) }}">Câu tiếp theo</a>
		{% endif %}

{% endif %}

{% endblock %}

{% block morejavascripts %}
	<link rel="stylesheet" href="{{ asset('css/effect.css') }}" media="screen" type="text/css" />

	<script>
	$(function() {
	   $('#flash').delay(500).fadeIn('normal', function() {
    	  $(this).delay(500).fadeOut(3000);
	   });
	});
	$(function() {
	   $('#msg').delay(4100).fadeIn(3000);
	});
	</script>
{% endblock %}